<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, min imum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>分类</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/category.css">
    <script src="../js/moveapp.js"></script>
    <link rel="icon" href="../images/logo.png" style="width: 6px; height: 6px;">
</head>
<body>
    <header>
        <form action="">
            <img src="../images/下载 (1).png" alt="">
            <input type="text" placeholder="搜索商品名称">
        </form>
    </header>
    <main>
        <div class="main-left-container">
            <ul>
                <li><a href="../html/category.html">推荐</a></li>
                <li><a href="../html/category-1.html">Xiaomi手机</a></li>
                <li><a href="">Redmi手机</a></li>
                <li><a href="">游戏手机</a></li>
                <li><a href="">电脑平板</a></li>
                <li><a href="">智能穿戴</a></li>
                <li><a href="">电视</a></li>
                <li><a href="">大家电</a></li>
                <li><a href="">小家电</a></li>
                <li><a href="">智能家居</a></li>
                <li><a href="">户外出行</a></li>
                <li><a href="">日用百货</a></li>
                <li><a href="">儿童用品</a></li>
                <li><a href="">有品精选</a></li>
                <li><a href="">小米服务</a></li>
            </ul>
        </div>
        <div class="main-right-container">
            <div class="top-pic">
                <img src="../images/分类-大屏电视.png" alt="">
            </div>
            <div class="title">
                <span>精选推荐</span>
            </div>
            <div class="product">
                <a href="">
                    <div class="product-item">
                        <div class="pic">
                            <img src="../images/分类-redmi.png" alt="">
                        </div>
                        <div class="price">
                            <h2>Redmi<span>9A</span></h2>
                            <h3>¥599<span>起</span></h3>
                        </div>
                    </div>
                </a>
                <a href="">
                    <div class="product-item">
                        <div class="pic">
                            <img src="../images/分类-吹风机.png" alt="">
                        </div>
                        <div class="price">
                            <h2>Redmi<span>9A</span></h2>
                            <h3>¥599<span>起</span></h3>
                        </div>
                    </div>
                </a>
                <a href="">
                    <div class="product-item">
                        <div class="pic">
                            <img src="../images/分类-小爱音响.png" alt="">
                        </div>
                        <div class="price">
                            <h2>Redmi<span>9A</span></h2>
                            <h3>¥599<span>起</span></h3>
                        </div>
                    </div>
                </a>
            </div>
            <div class="classify">
                <div class="classify-item">
                    <a href="">
                        <div class="small-pic">
                            <img src="../images/分类-保温杯.png" alt="">
                            <div class="name">保温杯</div>
                        </div>
                    </a>
                    <a href="">
                        <div class="small-pic">
                            <img src="../images/分类-运动鞋.png" alt="">
                            <div class="name">运动鞋</div>
                        </div>
                    </a>
                    <a href="">
                        <div class="small-pic">
                            <img src="../images/分类-剃须刀.png" alt="">
                            <div class="name">剃须刀</div>
                        </div>
                    </a>
                </div>
                <div class="classify-item">
                    <a href="">
                        <div class="small-pic">
                            <img src="../images/分类-保温杯.png" alt="">
                            <div class="name">保温杯</div>
                        </div>
                    </a>
                    <a href="">
                        <div class="small-pic">
                            <img src="../images/分类-运动鞋.png" alt="">
                            <div class="name">运动鞋</div>
                        </div>
                    </a>
                    <a href="">
                        <div class="small-pic">
                            <img src="../images/分类-剃须刀.png" alt="">
                            <div class="name">剃须刀</div>
                        </div>
                    </a>
                </div>
                <div class="classify-item">
                    <a href="">
                        <div class="small-pic">
                            <img src="../images/分类-保温杯.png" alt="">
                            <div class="name">保温杯</div>
                        </div>
                    </a>
                    <a href="">
                        <div class="small-pic">
                            <img src="../images/分类-运动鞋.png" alt="">
                            <div class="name">运动鞋</div>
                        </div>
                    </a>
                    <a href="">
                        <div class="small-pic">
                            <img src="../images/分类-剃须刀.png" alt="">
                            <div class="name">剃须刀</div>
                        </div>
                    </a>
                </div>
                <div class="classify-item">
                    <a href="">
                        <div class="small-pic">
                            <img src="../images/分类-保温杯.png" alt="">
                            <div class="name">保温杯</div>
                        </div>
                    </a>
                    <a href="">
                        <div class="small-pic">
                            <img src="../images/分类-运动鞋.png" alt="">
                            <div class="name">运动鞋</div>
                        </div>
                    </a>
                    <a href="">
                        <div class="small-pic">
                            <img src="../images/分类-剃须刀.png" alt="">
                            <div class="name">剃须刀</div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </main>
    <!-- 底部导航 -->
    <footer>
        <div class="nav-bottom">
            <a href="../index.html">
                <img src="../images/icon-home.c1947eda40.png" alt="">
            <h1>首页</h1>
            </a>
        </div>
        <div class="nav-bottom">
            <a href="./category.html">
                <img src="../images/icon-category-selected.252b82a2d7.png" alt="">
                <h1>分类</h1>
            </a>
           
        </div>
        <div class="nav-bottom">
            <a href="./star.html">
                <img src="../images/icon-star.d051789804.png" alt="">
                <h1>米圈</h1>
            </a>
        </div>
        <div class="nav-bottom">
            <a href="./cart.html">
                <img src="../images/icon-cart.585c3aa4d3.png" alt="">
                <h1>购物车</h1>
            </a>
        </div>
        <div class="nav-bottom">
            <a href="./user.html">
                <img src="../images/icon-user.23496a0116.png" alt="">
                <h1>我的</h1>
            </a>
        </div>
    </footer>
</body>
</html>